<template>
	<view class="wrapper shenQing c9b">
		<div class="bfff posr">
			<image src="../../../static/woDe/status1.png" mode="widthFix" class="posa"></image>
			<div class="flex-start mb25">
				<image src="../../../static/shouye/shen1.png" class="shen1-icon mr10" mode="widthFix"></image>
				<div class="f32">预约信息</div>
			</div>
			<div class="center f28 mb20">
				<div class="c333">服务名称</div>
				<div class="flex1 tRight">城乡居民养老保险参保登记</div>
			</div>
			<div class="center f28 mb20">
				<div class="c333 flex1">办理地址</div>
				<div class="">隆昌市古湖街道恒隆路三段79号<image src="../../../static/shouye/shen3.png" mode="widthFix"
						class="address-icon ml5 posr"></image>
				</div>

			</div>
			<div class="center f28 mb20">
				<div class="c333">联系电话</div>
				<div class="flex1 tRight">0832-3982259</div>
			</div>

			<div class="center f28 mb20 w100">
				<div class="c333">预约日期</div>
				<div class="flex1 ctheme tRight">
					2023-09-30
				</div>
			</div>
			<div class="center f28 w100 mb20">
				<div class="c333">预约时间</div>
				<div class="flex1 ctheme tRight">
					09:00-09:30
				</div>
			</div>
			<div class="f28 mb20">
				<div class="c333 mb10">办理简介</div>
				<textarea disabled placeholder="请填写预约备注" placeholder-class="c9b" class="f28 w100"></textarea>
			</div>
			<div class="f28 mb20">
				<div class="c333 mb10">预约备注</div>
				<textarea disabled placeholder="请填写预约备注" placeholder-class="c9b" class="f28 w100"></textarea>
			</div>
		</div>
		<div class="bfff mt40">
			<div class="flex-start mb25">
				<image src="../../../static/shouye/shen2.png" class="shen2-icon mr10" mode="widthFix"></image>
				<div class="f32">个人信息</div>
			</div>
			<div class="center f28 w100 mb20">
				<div class="c333">姓名</div>
				<div class="flex1 tRight">0832-3982259</div>
			</div>

			<div class="center f28 w100 mb20">
				<div class="c333">证件类型</div>
				<div class="flex1 tRight">0832-3982259</div>
			</div>

			<div class="center f28 w100 mb20">
				<div class="c333">证件号</div>
				<div class="flex1 tRight">0832-3982259</div>
			</div>

			<div class="center f28 w100 mb20">
				<div class="c333">手机号</div>
				<div class="flex1 tRight">0832-3982259</div>
			</div>

			<div class="center f28 w100 mb20">
				<div class="c333">备用号</div>
				<div class="flex1 tRight">0832-3982259</div>
			</div>
		</div>
		<div class="mt40">
			<u-button type="primary" plain @click="submit" class="reset-btn">取消预约</u-button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: ['居民身份证'],
				model1: {
					date: '',
					time: '',
				}
			}
		},
		methods: {
			submit() {
				this.open('./jieGuo')
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			timeChange(e) {
				this.model1.time = e.detail.value
			},
			dateChange(e) {
				this.model1.date = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	:deep(.u-form-item__body) {
		padding: 0 !important;
	}

	

	.bfff {
		padding: 40rpx 28rpx;
		box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 12rpx 12rpx 12rpx 12rpx;

		.posa {
			width: 129.34rpx;
			height: 129.34rpx;
			top: 20rpx;
			right: 20rpx;
		}

		.center,
		.f28 {
			border-bottom: 1px solid #F1F1F1;
			padding-bottom: 20rpx;
		}

		.shen2-icon {
			width: 40.74rpx;
			height: 33.33rpx;
		}

		textarea {
			height: 162rpx;
			background: #F1F9FE;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 14rpx 20rpx;
		}

		.down-icon {
			width: 33.56rpx;
			height: 30.63rpx;
		}

		.input-box {
			height: 68rpx;
			background: #F1F9FE;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 0 20rpx;
		}

		.c333 {
			width: 130rpx;
		}

		.address-icon {
			width: 23.56rpx;
			height: 30.63rpx;
			top: 5rpx;
		}

		.shen1-icon {
			width: 35.45rpx;
			height: 39.77rpx;
		}
	}

	.c9b {
		.c333 {
			color: #999B9C;
		}
		.ctheme {
			color: #999B9C;
		}
		textarea {
			background:#F6F6F6;
		}
	}
	.shenQing {
		padding: 40rpx;

		.u-reset-button {
			width: 200rpx!important;
			height: 64rpx!important;
			border-radius: 12rpx 12rpx 12rpx 12rpx!important;
		}
	}
</style>